// import * as ReactDOMClient from 'react-dom/client'
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter ,BrowserRouter, Route, Routes, Link } from 'react-router-dom';
// import Test from "./help/src/AppTest"
// import Help from "./help/src/AppHelp"
// import Battle from "./battle-city/app/AppMe.tsx"

// import Editor from "./editor_web/src/B"
// import MotionDemo from "./css_layout/src/MotionDemo"
import { createRoot } from 'react-dom/client';

import FaIcon from "./fa/App"
import Flow from "./flow1/App"
import Lims from "./lims/App"
// import Clip from "./clip/App"
const Clip=()=><div />;
const CssLayRouter=()=><div />;
// import AppD3 from "./d3/src/App"
// import AppContext from "./css_layout/src/AppContext"
// import Pid from "./pid/src/PidSimulate"

// import I18n from './i18n/src/App'
const I18n=()=><div />
// import Todos from './todos/src/todos_mui/index'
// import Pant from './Pant/src/App'
// import Flatris from './flatris/src/client/app'
// import Pant2 from './Pant/src2/App'
// import Markdown from './markdown/src/M1'
// import Note_board from './note_board/src/mui/AppScrum_mui'
const Note_board=()=><div />;
// import TryBabel from "./tryBabel/src/Repl"
// import Ddz from './ddz/src/App'
const Ddz=()=><div />;
// const Flatris=false ? ()=>{
//   const A1=React.lazy(()=>import('./flatris/src/client/app'));
//   return (<React.Suspense fallback={<span>loading</span>}>
//     <A1 />
//   </React.Suspense>); }: ()=><div>Flatris</div>;
const A4=false ? ()=>{
    const A1=React.lazy(()=>import('./a4_print/src/editor'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>A4</div>;
const Emotion1=false ? ()=>{
    const A1=React.lazy(()=>import('./emotion1/src/E1'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Emotion1</div>;
// import A2048 from './2048/src/app';
const A2048=false ? ()=>{
    const A1=React.lazy(()=>import('./2048/src/app'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>A2048</div>;
const A2048_old=false ? ()=>{
    const A1=React.lazy(()=>import('./2048/src/app0'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>A2048</div>;    
const UnState1=false ? ()=>{
    const A1=React.lazy(()=>import('./unstat1/src/todos/index'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>UnState1</div>;   
const Mario=false ? ()=>{
    const A1=React.lazy(()=>import('./react_mario/App'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Mario</div>; 

const AppContext=()=><div />
const Markdown=false ? ()=>{
    const A1=React.lazy(()=>import('./markdown/src/M1'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Markdown</div>; 
function Test(){return <div />}
function AppD3(){return <div />}

const AppAnim=true ? ()=>{
    const A1=React.lazy(()=>import('./help/src/AppAnim'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>AppAnim</div>; 
const Pop1=true?()=>{
    const A1=React.lazy(()=>import('./pop1/App'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Pop1</div>; 

const Sheetjs1=true?()=>{
    const A1=React.lazy(()=>import('./sheetjs1/src/editor'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Sheetjs1</div>; 

const Audio1=false?()=>{
    const A1=React.lazy(()=>import('./audio1/App'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Audio1</div>; 

function Pid(){return <div/>}

function Todos(){
  return <div />
}
function MotionDemo(){
  return <div />
}
function Battle(){
  return <div>battle</div>
}
function Pant(){
  return <span>Pant</span>
}
function TryBabel(){
  return <span>TryBabel</span>
}
function Editor(){
 return(<span>Editor</span>);  
}
const Aria2=false? ()=>{
    const A1=React.lazy(()=>import('./aria2_ui/src/Ui'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>Aria2</div>; 

const CssLay=false? ()=>{
    const A1=React.lazy(()=>import('./css_layout/src/AppNewSplit'));
    return(<React.Suspense fallback={<span>loading</span>}>
      <A1 /></React.Suspense>); 
  }
  : ()=><div>CssLay</div>; 

function Help(){
 return(<span>help</span>); 
}
class Index extends Component {
  render = () => {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          width:"100%",
          flexDirection:"row",
          height:"100%",
          flexWrap:"wrap",
          alignItems: 'center',
        }}
      >
          <Link style={{margin:"5px"}} to="/A4">A4</Link>
          <Link style={{margin:"5px"}} to="/A2048">2048</Link>
          <Link style={{margin:"5px"}} to="/A2048_old">A2048_old</Link>
          <Link style={{margin:"5px"}} to="/Aria2">Aria2</Link>
          <Link style={{margin:"5px"}} to="/Audio1">Audio1</Link>
          <Link style={{margin:"5px"}}  to="/AppAnim">Anim</Link>
          <Link style={{margin:"5px"}}  to="/Battle">Battle</Link>
          <Link style={{margin:"5px"}}  to="/Clip">Clip</Link>
          <Link style={{margin:"5px"}}  to="/CssLay">css layout(split#)</Link>
          <Link  style={{margin:"5px"}} to="/CssLayRouter">css layout(router)</Link>
          <Link  style={{margin:"5px"}} to="/AppContext">context</Link>
          <Link  style={{margin:"5px"}} to="/AppD3">d3</Link>
          <Link  style={{margin:"5px"}} to="/Ddz">Ddz</Link>
          <Link style={{margin:"5px"}}  to="/Editor">Editor</Link>
          <Link style={{margin:"5px"}}  to="/Emotion1">emotion1</Link>
          <Link style={{margin:"5px"}}  to="/FaIcon">FaIcon</Link>
          <Link style={{margin:"5px"}}  to="/Flow">Flow</Link>
          <Link style={{margin:"5px"}}  to="/Help">Help</Link>
          <Link  style={{margin:"5px"}} to="/I18n">i18n</Link>
          <Link  style={{margin:"5px"}} to="/Lims">Lims</Link>
          <Link  style={{margin:"5px"}} to="/Mario">Mario</Link>
          <Link style={{margin:"5px"}}  to="/Note_board">Note_board</Link>
          <Link style={{margin:"5px"}}  to="/Test">Test</Link>
          <Link  style={{margin:"5px"}} to="/Todos">Todos</Link>
          <Link  style={{margin:"5px"}} to="/TryBabel">TryBabel</Link>
          <Link style={{margin:"5px"}}  to="/Markdown">Markdown</Link>
          <Link  style={{margin:"5px"}} to="/MotionDemo">MotionDemo</Link>
          <Link  style={{margin:"5px"}} to="/Pant">Pant</Link>
          <Link style={{margin:"5px"}}  to="/Pid">PidSimulate</Link>
          <Link style={{margin:"5px"}}  to="/Pop1">Pop1</Link>
          <Link style={{margin:"5px"}}  to="/Sheetjs1">Sheetjs1</Link>
          <Link style={{margin:"5px"}}  to="/UnState1">UnState1</Link>
          
      </div>
    );
  };
}
class Routers extends Component {
  render = () => {
    // console.log("root Routers")
    // console.log(this.props);
    return (
      <Routes>
        <Route  path="/A4" element={<A4 />} />
        <Route  path="/A2048" element={<A2048 />} />
        <Route  path="/A2048_old" element={<A2048_old />} />
        <Route  path="/Aria2" element={<Aria2 />} />
        <Route  path="/Audio1" element={<Audio1 />} />
        <Route  path="/AppAnim" element={<AppAnim />} />
        <Route  path="/Battle" element={<Battle />} />
        <Route  path="/Clip" element={<Clip />} />
        <Route  path="/CssLay" element={<CssLay />} />
        <Route  path="/AppContext" element={<AppContext />} />
        <Route  path="/AppD3" element={<AppD3 />} />
        <Route  path="/Ddz" element={<Ddz />} />
        <Route  path="/Editor" element={<Editor />} />
        <Route  path="/Emotion1" element={<Emotion1 />} />
        <Route  path="/Flow" element={<Flow />} />
        <Route  path="/Help" element={<Help />} />
        <Route  path="/I18n" element={<I18n />} />
        <Route  path="/Lims" element={<Lims />} />
        <Route  path="/Mario" element={<Mario />} />
        <Route  path="/Markdown" element={<Markdown />} />
        <Route  path="/MotionDemo" element={<MotionDemo />} />
        <Route  path="/Note_board" element={<Note_board />} />
        <Route  path="/Pant" element={<Pant />} />
        <Route  path="/Pid" element={<Pid />} />
        <Route  path="/Pop1" element={<Pop1 />} />
        <Route  path="/Sheetjs1" element={<Sheetjs1 />} />
        <Route  path="/Test" element={<Test />} />
        <Route  path="/Todos" element={<Todos />} />
        <Route  path="/TryBabel" element={<TryBabel />} />
        <Route  path="/UnState1" element={<UnState1 />} />
        <Route  path="/FaIcon" element={<FaIcon />} />
        <Route  path="/index" element={<Index />} />
        <Route  path="/" element={<Index />} />
      </Routes>
    );
  };
}
export default class Root extends Component {
  render() {
    return (
      <HashRouter>
        <Routers />
      </HashRouter>
    );
  }
}
// const root=ReactDOMClient.createRoot(document.getElementById('root'));
// root.render(<Root />)
const root = createRoot(document.getElementById('root'));
root.render(<Root />);
// =======
// import React, { Component } from 'react';
// import * as ReactDOMClient from 'react-dom/client'
// import App2048 from './2048/src/app';
// import A4_print from './a4_print/src/editor';
// import D3 from './d3/src/index';
// import F1 from './fluent1/App';
// import Pid from './pid/src/PidSimulate'
// import Tshirt from './tshirt/src/editor'
// import { HashRouter ,BrowserRouter, Route, Routes, Link } from 'react-router-dom';
// function Mini(){
//   const [state,setState]=React.useState("http://127.0.0.1:8000");
//   return (
//   <div>
//     <input id="input_1" 
//     onKeyDown={(event)=>{
//       if(event.keyCode===13){
//         window.location=state;
//       }
//     }} 
//     onChange={(e)=>{
//       setState(e.target.value);
//     }}
//     value={state}>
//     </input>
//     <button onClick={()=>{
//       window.location=state;
//     }}>go</button></div>);
// }
// class Index extends Component {
//   render = () => {
//     // console.log(this.props);
//     return (
//       <div
//         style={{
//           display: 'flex',
//           width: '600px',
//           justifyContent: 'space-between',
//           alignItems: 'center',
//         }}
//       >
//         <Link to="/F1">Fluent1</Link>
//         <Link to="/Tshirt">Tshirt</Link>
//         <Link to="/D3">D3</Link>
//         <Link to="/Pid">Pid</Link>
//         <Link to="/App2048">App2048</Link>
//         <Link to="/A4_print">A4_print</Link>
//       </div>
//     );
//   };
// }
// class Routers extends Component {
//   render = () => {
//     console.log(this.props);
//     return (
//       <Routes>
//         <Route path="/Tshirt" element={<Tshirt />} />
//         <Route path="/Pid" element={<Pid />} />
//         <Route path="/F1" element={<F1 />} />
//         <Route path="/A4_print" element={<A4_print />} />
//         <Route path="/D3" element={<D3 />} />
//         <Route path="/App2048" element={<App2048 />} />
//         <Route path="/" element={<Index />} />
//         <Route element={<Index />} />
//       </Routes>
//     );
//   };
// }
// export default function Root(){
//     console.log("hello")
//     return (
//       <div>
//       <a href="file:///home/mhq/web/index.html">my favourite</a>
//       <Mini />
//       <HashRouter>
//         <Routers />
//       </HashRouter>
//       </div>
//     );
// }
// const root=ReactDOMClient.createRoot(document.getElementById('root'));
// root.render(<Root />)